<template>
        <div class="card p-3 bg-white mb-3">
            <div class="card-head py-1">
                <div class="d-flex ai-center">
                    <i class="sprite mr-2" :class="`sprite-${icon}`"></i>
                    <span class="fs-xl flex-1">{{title}}</span>
                    <i class="sprite sprite-more"></i>
                </div>
                <div class="card-ad pt-3">
                    <slot name="ad"></slot>
                </div>
            </div>
            <div class="card-body pt-2">
                <slot name='body'></slot>
            </div>
        </div>
</template>

<script>

    export default {
        props:{
            title:{
                type:String,
                required:true
            },
            icon:{
                type:String,
                required:true
            },
        }
    }
</script>

<style lang="scss" scoped>
@import 'assets/scss/_variables.scss';
.card-head{
    border-bottom: 1px solid rgb(212, 217, 222);
}
.card-ad img{
    border-radius: 0.2308rem;
}
</style>